<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>约谈信息</e-heading>
      <template>
        <el-tabs v-model="type" @tab-click="handleTabs">
          <!--<el-tab-pane label="招商" name="business"></el-tab-pane>-->
          <el-tab-pane label="赞助" name="support"></el-tab-pane>
        </el-tabs>
      </template>
      <div v-if="list.list && list.list.length>0" class="talktable">
        <template>
          <el-table
            v-bind="getTableProps()"
            :data="list.list"
            >
            <el-table-column
              prop="sponsorName"
              label="主题">
            </el-table-column>
            <el-table-column
              prop="purposeDesc"
              label="收到的信息"
              width="200">
            </el-table-column>
            </el-table-column>
            <el-table-column
              prop="contactPhone"
              label="联系人\手机号"
              align="center">
              <template slot-scope="scope">
                {{scope.row.contactPerson}}
                <br>
                {{scope.row.contactPhone}}
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="发送时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime | FormatDate('yyyy-MM-dd HH:mm:ss')}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="80"
              align="center">
              <template slot-scope="scope">
                <el-button type="link" @click="del(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="list.total"
            v-bind="getPaginationProps(list)"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </template>
      </div>
      <e-placeholder v-else-if="list.loaded" text="暂无约谈!" src="/static/images/sponsor/nodata_talk.png"></e-placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/sponsor'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      list: 'sponsor_talk_list'
    })
  },
  data () {
    let isCertify
    return {
      isCertify,
      type: this.$route.params.type || 'support',
      query: this.getQuery()
    }
  },
  methods: {
    del (id, status) {
      this.$confirm('确定要删除数据？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        api.talk_del({
          id: id
        }).then(res => {
          this.$message('删除成功')
          this.fetch(this.query)
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    },
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      // query.talkType = this.type === 'business' ? 0 : 1 // 0招商 1赞助
      query.talkType = 1 // 0招商 1赞助
      this.$store.dispatch('sponsor_talk_list', query)
    },
    handleTabs (tab, event) { // 切换选项卡
      this.$router.push({path: '/sponsor/talk/' + this.type})
      this.fetch(this.query)
    }
  }
}
</script>

<style lang="scss">
  
  .nodata{
    padding: 100px 0;
    text-align: center;
    p{
      padding: 15px 0 30px 0;
    }
  }
  .talktable {
    table{
      border-left: 1px solid #f0f0f0;
      th {
        background-color: #f5f5f5;
        text-align: center;
      }
    }
  }
</style>
